<template>
  <div class="sqlite-viewer-page">
    <div class="page-header">
      <h2>向量数据库查看器</h2>
      <p>查看 chroma.sqlite3 数据库内容</p>
    </div>
    
    <div class="content-container">
      <div class="file-info">
        <div class="file-icon">
          <icon-database />
        </div>
        <div class="file-details">
          <h3>chroma.sqlite3</h3>
          <p>路径：D:/code/DT_project_brandnew/public/chroma.sqlite3</p>
          <p>类型：SQLite 数据库文件</p>
        </div>
      </div>
      
      <div class="database-content">
        <div class="tabs">
          <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="tables" tab="数据表">
              <div class="table-list">
                <div 
                  v-for="table in tables" 
                  :key="table.name"
                  class="table-item"
                  @click="selectTable(table)"
                >
                  <div class="table-icon">
                    <icon-table />
                  </div>
                  <div class="table-info">
                    <div class="table-name">{{ table.name }}</div>
                    <div class="table-meta">
                      <span class="row-count">{{ table.rowCount }} 行</span>
                      <span class="table-size">{{ table.size }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
            
            <a-tab-pane key="query" tab="SQL查询">
              <div class="query-section">
                <a-textarea 
                  v-model="sqlQuery" 
                  placeholder="输入SQL查询语句..."
                  :rows="4"
                  class="query-input"
                />
                <div class="query-actions">
                  <a-button type="primary" @click="executeQuery">
                    <template #icon><icon-play /></template>
                    执行查询
                  </a-button>
                  <a-button @click="clearQuery">
                    <template #icon><icon-delete /></template>
                    清空
                  </a-button>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
        
        <div class="results-section" v-if="queryResults.length > 0">
          <h4>查询结果</h4>
          <div class="results-table">
            <table>
              <thead>
                <tr>
                  <th v-for="column in resultColumns" :key="column">{{ column }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in queryResults" :key="index">
                  <td v-for="column in resultColumns" :key="column">{{ row[column] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'

// 响应式数据
const activeTab = ref('tables')
const sqlQuery = ref('SELECT * FROM embeddings LIMIT 10')
const queryResults = ref([])
const resultColumns = ref([])

// 模拟数据表信息
const tables = ref([
  {
    name: 'embeddings',
    rowCount: 6160,
    size: '2.3 MB',
    description: '向量嵌入数据表'
  },
  {
    name: 'documents',
    rowCount: 1024,
    size: '1.1 MB',
    description: '文档元数据表'
  },
  {
    name: 'collections',
    rowCount: 5,
    size: '45 KB',
    description: '集合信息表'
  }
])

// 选择数据表
const selectTable = (table) => {
  sqlQuery.value = `SELECT * FROM ${table.name} LIMIT 10`
  Message.info(`已选择表：${table.name}`)
}

// 执行查询
const executeQuery = () => {
  if (!sqlQuery.value.trim()) {
    Message.warning('请输入查询语句')
    return
  }
  
  // 模拟查询结果
  if (sqlQuery.value.toLowerCase().includes('embeddings')) {
    queryResults.value = [
      { id: 1, vector: '[0.1, 0.2, 0.3, ...]', document_id: 'doc_001', collection_id: 'col_001' },
      { id: 2, vector: '[0.4, 0.5, 0.6, ...]', document_id: 'doc_002', collection_id: 'col_001' },
      { id: 3, vector: '[0.7, 0.8, 0.9, ...]', document_id: 'doc_003', collection_id: 'col_002' }
    ]
    resultColumns.value = ['id', 'vector', 'document_id', 'collection_id']
  } else if (sqlQuery.value.toLowerCase().includes('documents')) {
    queryResults.value = [
      { id: 'doc_001', content: '示例文档内容1', metadata: '{"type": "text"}' },
      { id: 'doc_002', content: '示例文档内容2', metadata: '{"type": "pdf"}' },
      { id: 'doc_003', content: '示例文档内容3', metadata: '{"type": "word"}' }
    ]
    resultColumns.value = ['id', 'content', 'metadata']
  } else {
    queryResults.value = [
      { message: '查询执行成功', rows: '3', time: '0.05s' }
    ]
    resultColumns.value = ['message', 'rows', 'time']
  }
  
  Message.success('查询执行成功')
}

// 清空查询
const clearQuery = () => {
  sqlQuery.value = ''
  queryResults.value = []
  resultColumns.value = []
}

onMounted(() => {
  console.log('SQLite查看器页面已加载')
})
</script>

<style scoped>
.sqlite-viewer-page {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.page-header p {
  margin: 0;
  color: #666;
}

.content-container {
  background: white;
  padding: 24px;
  border-radius: 8px;
  min-height: 400px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8px;
  border-left: 4px solid #667eea;
  margin-bottom: 24px;
}

.file-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.file-details h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
}

.file-details p {
  margin: 0 0 2px 0;
  color: #86909c;
  font-size: 14px;
}

.database-content {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.tabs {
  background: #fafafa;
}

.table-list {
  padding: 16px;
}

.table-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.table-item:hover {
  background: #f8f9fa;
  border-color: #667eea;
}

.table-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
  margin-right: 12px;
}

.table-info {
  flex: 1;
}

.table-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
}

.table-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #86909c;
}

.query-section {
  padding: 16px;
}

.query-input {
  margin-bottom: 12px;
}

.query-actions {
  display: flex;
  gap: 8px;
}

.results-section {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}

.results-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.results-table {
  overflow-x: auto;
}

.results-table table {
  width: 100%;
  border-collapse: collapse;
}

.results-table th,
.results-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.results-table th {
  background: #fafafa;
  font-weight: 600;
  color: #1d2129;
}

.results-table td {
  color: #4e5969;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sqlite-viewer-page {
    padding: 16px;
  }
  
  .content-container {
    padding: 16px;
  }
  
  .file-info {
    flex-direction: column;
    text-align: center;
  }
}
</style>
